<template>
    <div>
        <div>
            <el-row :gutter="10" class="mb8" style="margin-top: 10px;margin-right: 10px;display: flex;flex-direction: row-reverse;">
                <el-col :span="1.5">
                    <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="saveDesigner">保存</el-button>
                </el-col>
            </el-row>
        </div>
        <fc-designer ref="designer" height="calc(100vh - 130px)"/>
    </div>
</template>

<script>
import {getCustomForm,updateCustomForm} from "@/api/oa/customForm";

export default {
    name: "FormDesigner",
    data() {
        return {
            formId: 0,
            rules:[],
            options:{
                "form": {
                    "labelPosition": "right",
                    "size": "small",
                    "labelWidth": "125px",
                    "hideRequiredAsterisk": false,
                    "showMessage": true,
                    "inlineMessage": false
                },
                "submitBtn": false,
                "resetBtn": false
            }
        }
    },
    created() {
        const formId = this.$route.params && this.$route.params.formId;
        this.formId = formId;
        this.loadFormRulesAndOptions(formId);
    },
    methods: {
        loadFormRulesAndOptions(formId) {
            getCustomForm(formId).then(response => {
                console.log(response)
                if (200 == response.code) {
                    if(response.data){
                        console.log("数据库存的options");
                        console.log(response.data.options);
                        if(response.data.rules){
                            this.rules = response.data.rules;
                        }
                        if(response.data.options){
                            this.options = response.data.options;
                        }
                        this.$refs.designer.setRule(JSON.parse(this.rules));
                        this.$refs.designer.setOption(JSON.parse(this.options));
                    }
                }
            });
        },
        saveDesigner() {
            //FcDesigner 生成的`JSON`
            const rules = this.$refs.designer.getRule();
            //FcDesigner 生成的`options`
            const options = this.$refs.designer.getOption();
            console.log(rules);
            console.log(options);
            let form = {};
            form.id = this.formId;
            form.rules = JSON.stringify(rules);
            form.options = JSON.stringify(options);
            updateCustomForm(form).then(res =>{
                if(200 == res.code){
                    this.$modal.notifySuccess("保存成功");
                }
            })
        }
    }
}
</script>

<style scoped>

</style>
